import './App.scss'
import routers from '@/routes/routerConfig'
import { useLocation, useRoutes } from 'react-router-dom'
import { Suspense, useContext, useLayoutEffect } from 'react'
import { App as AntApp, ConfigProvider } from 'antd'
import { StyleProvider } from '@ant-design/cssinjs'
import Layout from '@/pages/layout'
import { setRootColor } from '@/config/theme'

function App() {
  const { locale, theme } = useContext(ConfigProvider.ConfigContext)
  useLayoutEffect(() => {
    ConfigProvider.config({
      holderRender: (children) => (
        <StyleProvider hashPriority="high">
          <ConfigProvider
            prefixCls="static"
            iconPrefixCls="icon"
            locale={locale}
            theme={theme}
          >
            <AntApp
              message={{ maxCount: 1 }}
              notification={{ maxCount: 1 }}
            >
              {children}
            </AntApp>
          </ConfigProvider>
        </StyleProvider>
      )
    })
    setRootColor()
  }, [locale, theme])
  const location = useLocation()
  const elements = useRoutes(routers)

  if (location.pathname === '/login' || location.pathname === '/') {
    return <>{elements}</>
  }

  return (
    <Layout>
      <Suspense>{elements}</Suspense>
    </Layout>
  )
}

export default App
